/* 
  目标： 了解=Context跨组价通信，让App组件-直接传数据给SonSon组件
*/

import React from 'react';
// 1. React.createContext 创建上下文环境， 解构出两个组件Provider  Consumer
const { Provider, Consumer } = React.createContext();
export default function App() {
  return (
    <div>
      <h1>父组件</h1>

      <Provider
        // 3. 在Provider上，设置value属性传值
        value={[1, 2, 3]}
      >
        {/* 2. 使用Provicer包住后代组件 */}
        <Son />
      </Provider>
    </div>
  );
}

function Son() {
  return (
    <div>
      <h2> 儿子</h2>
      <SonSon />
    </div>
  );
}

function SonSon() {
  return (
    <div>
      <h2> 孙子</h2>
      <Consumer>
        {/* // 4. 使用Consumer在任意组件中， 接收数据 */}
        {(data) => {
          return data.map((item) => <h1 key={item}>{item}</h1>);
        }}
      </Consumer>
    </div>
  );
}
